<template>
	<view style="padding: 1px;box-sizing: border-box;" class="pages">
		<view class="form">
			<view style="padding: 0 10px;">
				<view style="height: 50px;line-height: 50px;">{{$t('recharge.transfer.sMa')}}</view>
				<view>
					<image :src="form.img" mode="widthFix" style="width: 100%;"></image>
				</view>
			</view>
			<view class="form_item">
				<view>{{$t('recharge.transfer.sNum')}}</view>
				<input type="text" v-model="form.sAccount">
				<image src="@/static/shop/img/mine/copy.png" mode="widthFix" style="width: 20px;"
					@click="copy(form.sAccount)"></image>
			</view>
			<view class="form_item">
				<view>{{$t('recharge.transfer.cWeb')}}</view>
				<view style="position: relative;left: 48rpx;">
					<input type="text" :placeholder="$t('recharge.transfer.Chong')" v-model="form.name">
					<view class="address" v-show="addressShow">
						<view v-for="item in addresslList" :key="item.id" @click="addressClick(item)">{{item.name}}
						</view>
					</view>
				</view>
				<uni-icons :type="addressShow?'top':'bottom'" @click="addressShow=!addressShow"></uni-icons>
			</view>
			<view class="form_item">
				<view>{{$t('recharge.transfer.cMoney')}}</view>
				<input type="number" :placeholder="$t('recharge.transfer.chongMoney')" v-model="form.price">
			</view>
			<view class="form_item">
				<view>{{$t('recharge.transfer.fNum')}}</view>
				<input type="text" :placeholder="$t('recharge.transfer.chongNum')" v-model="form.fAccount">
			</view>
			<view style="padding: 0 10px;">
				<view style="height: 50px;line-height: 50px;">{{$t('recharge.transfer.Pic')}}</view>
				<uni-file-picker limit="1" @select="select" @delete="del"></uni-file-picker>
			</view>
		</view>
		<view class="btn" @click="userCheckRecharge">{{$t('recharge.transfer.Sure')}}</view>
	</view>
</template>

<script>
	import {
		getRechargeChannel,
		getRechargePayment,
		userCheckRecharge,
		userRecharge
	} from '@/api/api.js'
	export default {
		data() {
			return {
				form: {},
				addressShow: false,
				addresslList: [],
			};
		},
		onShow() {
			getRechargeChannel({
					type: 2
				}).then(res => {
					this.addresslList = res.data.data
					this.form.name = this.addresslList[0].name
					this.form.value = this.addresslList[0].value
					this.getRechargePayment(this.addresslList[0].id)
				}),
				uni.setNavigationBarTitle({
					title: this.$t('list.Zhuan')
				})
		},
		methods: {
			addressClick(item) {
				this.form.name = item.name
				this.form.value = item.value
				this.addressShow = false
				this.getRechargePayment(item.id)
			},
			getRechargePayment(id) {
				getRechargePayment({
					channel_id: id
				}).then(res => {
					this.form.img = res.data.data.payimg
					this.form.sAccount = res.data.data.payid
					this.form.id = res.data.data.id
					this.$forceUpdate() // 页面强制刷新
				})
			},
			copy(text) {
				let that = this
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: that.$t('recharge.transfer.Copy')
						})
					}
				});
			},
			userCheckRecharge() {
				if (this.form.btn == 1) {
					userCheckRecharge({
						token: uni.getStorageSync('token'),
						money: this.form.price,
					}).then(res => {
						this.userRecharge()
					})
				} else if (this.form.btn == 0) {
					uni.showToast({
						title: this.$t('recharge.transfer.upPic'),
						icon: "none"
					})
				} else {
					return 0
				}
			},
			userRecharge() {
				userRecharge({
					token: uni.getStorageSync('token'),
					money: this.form.price,
					type: this.form.value,
					payment_id: this.form.id,
					pay_image: this.form.image
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/shop/recharge/rechargeList'
						})
					}, 600)
				})
			},
			del() {
				this.form.image = ''
			},
			// 获取上传状态
			select(e) {
				const uploadTask = uni.uploadFile({
					url: 'https://appzdm.com/api/common/upload',
					methods: 'POST',
					formData: {
						token: uni.getStorageSync('token'),
						file: e.tempFilePaths[0]
					},
					name: 'file',
					filePath: e.tempFilePaths[0],
					success: (res) => {
						this.form.image = JSON.parse(res.data).data.url
					}
				})
				uploadTask.onProgressUpdate((res) => {
					if (res.progress == 100) {
						this.form.btn = 1
					} else {
						this.form.btn = 0
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-input-placeholder {
		color: #ddd;
		font-size: 28rpx;
	}

	.form {
		width: 96%;
		margin: 0 auto;
		font-size: 28rpx;

		.form_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60px;
			border-bottom: #ddd 1px solid;
			padding: 0 10px;
			position: relative;

			&>input {
				flex-grow: 1;
				margin-left: 20px;
				height: 50px;
				color: grey;
			}

			.address {
				position: absolute;
				top: 30px;
				left: -10px;
				right: -50px;
				background-color: #ddd;
				z-index: 10;

				&>view {
					height: 40px;
					line-height: 40px;
					padding-left: 5px;
					border-bottom: #fff 1px solid;
				}
			}
		}
	}

	.btn {
		width: 80%;
		margin: 50px auto;
		background-color: #00C2C2;
		color: #fff;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-radius: 5px;
	}
</style>